<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="pear-admin-flask">
  <meta name="keyword" content="pear-admin-flask">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="{{ url_for('static', filename='/index/layui/css/layui.css') }}"/>
  <link rel="stylesheet" href="{{ url_for('static', filename='/index/css/main.css') }}"/>
  <link rel="stylesheet" href="{{ url_for('static', filename='/index/css/load.css') }}"/>
  <style>
      .layui-nav .layui-this:after {
          display: none;
      }

      .layui-nav .layui-nav-bar {
          display: none;
      }
  </style>
  <title>首页</title>
</head>
<body>
<!-- header -->
<div class="ew-header">
  <div class="ew-nav-group">
    <div class="nav-toggle"><i class="layui-icon layui-icon-more-vertical"></i></div>
    <ul class="layui-nav" lay-filter="ew-header-nav">
      {% if client_user %}
        <li class="layui-nav-item">
          <a href="{{ url_for('user.get_user_info_index') }}">{{ client_user.realname }}</a>
        </li>
        <li class="layui-nav-item">
          <a href="{{ url_for('user.user_logout') }}">注销</a>
        </li>
      {% else %}
        <li class="layui-nav-item">
          <a href="{{ url_for('user.user_login') }}">登录</a>
        </li>
        <li class="layui-nav-item">
          <a href="{{ url_for('user.user_register') }}" target="_blank">注册</a>
        </li>
      {% endif %}
    </ul>
  </div>
</div>
<!-- content -->
<div class="layui-container">
  <fieldset class="layui-elem-field">
    <legend class="title">个人信息</legend>
    <div class="layui-field-box">
      <div class="layui-row layui-col-space10">
        {#          左侧栏#}
        <div class="layui-col-md3">
          <div class="layui-card" style="margin-top: 30%">
            <div class="layui-card-body">
              <div class="text-center layui-text">
                <div class="user-info-head" id="userInfoHead">
                  <img id="avatar" src="{{ url_for('static',filename="index/images/un29.svg") }}" alt=""/>
                </div>
                <h2 style="padding-top: 20px;font-size: 20px;">{{ client_user.realname }}</h2>
                <p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
              </div>
            </div>
            <div style="height: 45px;text-align: center;line-height: 45px;font-size: 13.5px;">
              <span>欢迎你的加入</span>
            </div>
          </div>
        </div>
        {#          右侧栏#}
        <div class="layui-col-md9">
          <div class="layui-card">
            <div class="layui-card-header">个人信息</div>
            <div class="layui-card-body">
              <div class="layui-tab layui-tab-brief">
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show">
                    <form class="layui-form">
                      <div class="layui-form-item">
                        <label class="layui-form-label">账号</label>
                        <div class="layui-input-block">
                          <input value="{{ client_user.username }}" type="text" readonly name="username"
                                 lay-verify="title"
                                 autocomplete="off" placeholder="请输入标题" class="layui-input">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-block">
                          <input value="{{ client_user.realname }}" type="text" name="realName"
                                 lay-verify="title"
                                 autocomplete="off" placeholder="请输入标题" class="layui-input">
                        </div>
                      </div>

                      <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                                        <textarea placeholder="请输入描述" name="details"
                                                  class="layui-textarea">{{ client_user.remark }}</textarea>
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <div class="layui-input-block">
                          <button class="update-info" lay-submit
                                  lay-filter="user-update">修改资料
                          </button>
                          <button class="edit-password">更改密码</button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset class="layui-elem-field">
    <legend class="title">收藏夹</legend>
    <div class="layui-field-box">
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
          <li class="layui-this">学业信息</li>
          <li>收藏夹</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-row" style="margin-top: 5%">
            <div class="layui-col-md6  layui-col-xs12">
              <div class="ew-banner-right">
                <img class="show" style="width: 60%;" style="margin-top: 0px!important;"
                     src="{{ url_for('static', filename='/index/images/user_login.svg') }}">
              </div>
            </div>
            <div class="layui-col-md6  layui-col-xs12">
              <form action="{{ url_for('user.edu_login') }}" class="layui-form" style="width: 55%;" method="post">
                <div class="layui-form-item">
                  <div class="title">Edu.Login</div>
                </div>
                <div class="layui-form-item">
                  <input name="username" type="text" placeholder="账 户 :  " value="" hover class="layui-input"/>
                </div>
                <div class="layui-form-item">
                  <input name="password" type="password" placeholder="密 码 : " value="" hover class="layui-input"/>
                </div>
                <div class="layui-form-item">
                  <input placeholder="验证码 : " name="captcha" hover class="code layui-input layui-input-inline"/>
                  <img src="{{ url_for('passport.get_captcha') }}" class="codeImage" id="captchaImage"/>
                </div>
                <div class="layui-form-item">
                  <input type="checkbox" name="agree-me" title="同意登录教务系统" lay-skin="primary">
                </div>
                <div class="layui-form-item">
                  <button class="layui-btn layui-btn-normal login" lay-submit lay-filter="login"
                          style="width: 100% !important;font-size: 16px !important;background-color:#00B0FF">
                    登 入
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <div style="margin-bottom: 10%"></div>
</div>
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['element', 'jquery', 'layer', 'form'], function () {
        let $ = layui.jquery
        let layer = layui.layer
        let form = layui.form
        // 修改密码页面
        $('.edit-password').click(function () {
            layer.open({
                type: 2,
                title: '修改密码',
                shade: 0.1,
                area: ['550px', '280px'],
                content: '/user/self/editPassword'
            })
            return false
        })

        // 表单提交更改个人信息数据
        form.on('submit(user-update)', function (data) {
            $.ajax({
                url: '/user/self/updateInfo',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    if (result.success) {
                        layer.msg('修改成功', {icon: 1, time: 1000})
                    } else {
                        layer.msg('修改失败', {icon: 2, time: 1000})
                    }
                }
            })
            return false
        })
    })
</script>
</body>
</html>

<style>
    .title {
        font-weight: 550 !important;
        color: #00B0FF !important;
        display: inline-block !important;
        line-height: 60px !important;
    }

    .layui-card {
        box-shadow: none;
    }

    .layui-form-item {
        margin-top: 17px !important;
        margin-bottom: 17px !important;
    }

    .update-info {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 8px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        background-color: white;
        color: black;
        border: 2px solid #4CAF50;
    }

    .update-info:hover {
        background-color: #4CAF50;
        color: white;
    }

    .edit-password {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 8px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        background-color: white;
        color: black;
        border: 2px solid #008CBA;
    }

    .edit-password:hover {
        background-color: #008CBA;
        color: white;
    }

</style>

<style>
    .layui-form-item {
        margin-top: 20px !important;
    }

    .layui-input {
        height: 44px !important;
        line-height: 44px !important;
        padding-left: 15px !important;
        border-radius: 3px !important;
    }

    .layui-input:focus {
        box-shadow: 0px 0px 2px 1px #00B0FF !important;
    }

    .title {
        font-size: 30px !important;
        font-weight: 550 !important;
        color: #00B0FF !important;
        display: inline-block !important;
        height: 45px !important;
        line-height: 60px !important;
    }

    .code {
        float: left;
        margin-right: 13px;
        margin: 0px !important;
        border: #e6e6e6 1px solid;
        display: inline-block !important;
    }

    .codeImage {
        float: right;
        height: 39px;
        border: #e6e6e6 1px solid;
    }
</style>